<template>
	<view class="addressForm">
		<u--form labelPosition="top" labelWidth="100" :model="addressForm" :rules="addressRules" ref="uForm">
			<u-form-item label="姓名" prop="username">
				<u--input v-model="addressForm.username" placeholder="请输入姓名"></u--input>
			</u-form-item>

			<u-form-item label="联系电话" prop="mobile">
				<u--input v-model="addressForm.mobile" placeholder="请输入联系电话"></u--input>
			</u-form-item>

			<u-form-item label="详细地址" prop="address">
				<u--input v-model="addressForm.address" placeholder="请输入街道"></u--input>
			</u-form-item>

			<u-form-item label="是否默认" prop="selected">
				<u-switch v-model="addressForm.selected" inactiveColor="#eee"></u-switch>
			</u-form-item>

			<u-form-item>
			</u-form-item>

			<u-form-item>
				<u-button type="primary" text="提交" @click="onsubmit"></u-button>
			</u-form-item>

		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressForm: {
					username: "",
					mobile: "",
					address: "",
					selected: ""
				},
				addressRules: {
					username: [{
							required: true,
							message: '姓名是必填的',
							trigger: ['blur', 'change'],
						},
						{
							min: 2,
							max: 8,
							message: '姓名长度在2-8个字符之间',
							trigger: ['blur', 'change'],
						}
					],
					mobile: [{
							required: true,
							message: '电话是必填的',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手电话号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					address: [{
						required: true,
						message: '地址是必填的',
						trigger: ['blur', 'change'],
					}]
				}
			};
		},
		methods: {
			onsubmit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressForm {
		padding: 30rpx;
	}
</style>